<template>
  <div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
	window._AMapSecurityConfig = {
  	securityJsCode: '5c2f44a20761be8eca124256843eb4a9'
	}
export default {
  data() {
    return {
      map: null
    }
  },
  methods: {
    initMap(obj) {
      AMapLoader.load({
        key: '7d8e09289391ff2bf20eee67c0bcda22', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
      .then(AMap => {
        var map = new AMap.Map("container", {
            center: [116.433322, 39.900256],
            zoom: 14
        });
        var circle = new AMap.Circle({
            center: [obj.placeLongitude, obj.placeLatitude],
            radius: obj.validRange || 0, //半径
            borderWeight: 3,
            strokeColor: "#FF33FF",
            strokeOpacity: 1,
            strokeWeight: 6,
            strokeOpacity: 0.2,
            fillOpacity: 0.4,
            strokeStyle: 'solid',
            strokeDasharray: [10, 10],
            // 线样式还支持 'dashed'
            fillColor: '#1791fc',
            zIndex: 50,
        })

        circle.setMap(map)
        // 缩放地图到合适的视野级别
        map.setFitView([ circle ])

        var circleEditor = new AMap.CircleEditor(map, circle)

        circleEditor.on('move', function(event) {
            log.info('触发事件：move')
        })

        circleEditor.on('adjust', function(event) {
            log.info('触发事件：adjust')
        })

        circleEditor.on('end', function(event) {
            log.info('触发事件： end')
            // event.target 即为编辑后的圆形对象
        })
      })
    }
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap()
  }
}
</script>

<style lang="less">
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 465px;
  margin-top: 24px;
}
</style>
